/*
    一个被渲染组件同样可以包含自己嵌套的<router-view>，要在嵌套的出口中渲染组件，需要在VueRouter参数中使用children配置
    以 / 开头的嵌套路径会被当做根路径
*/


const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})


/*
    当访问/user/foo时，user的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由，如果想渲染点什么，
    可以提供一个空的子路由

*/

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})